<template>
	<scroll-view class="time-line-wrap">
		<view class="time-line">
			<!-- 时间轴 -->
			<view class="time-line-container" :class="addTypeClass" v-if="pathChiArr.length >= 1">
				<!-- 时间轴内容块列表 -->
				<view class="time-line-list">
					<!-- 时间轴内容块 -->
					<template v-if="option == 1">
						<view class="time-line-info" :key="index" :class="[layoutClass(index)]" :id="'timeline'+index" v-for="(item,index) in pathChiArr">
							<block v-if="index == 0">
								<view class="time-line-title">
									<view>本知识点</view>
									<!-- <view v-else>{{pathChiArr.length-index}}级</view> -->
									<view class="colTxt" :class="classes(index)">
										<text class="iconfont icon-shoucangon"></text>
										<text>{{pathChiArr[0]}}</text>
									</view>
								</view>
							</block>
							<block v-else>
								<!-- 内容块内容 -->
								<view class="line-info-content" >
									<!-- 时间轴圆点 -->
									<view class="line-on-round" :style="{ opacity: current[index]&&current[index].is=='ok'?1:0,top:'50px'}" :class="current[index]&&current[index].is=='ok'?comeani:''"></view>
									<view class="info-content-wrap" :style="{ opacity: current[index]&&current[index].is=='ok'?1:0}" :class="current[index]&&current[index].is=='ok'?comeani:''">
										<!-- 标题 -->
										<view class="info-title">{{index}}级</view>
										<!-- 内容 -->
										<view class="info-content">
											<view class="info-txt colTxt" :class="classes(index)">
												<text class="iconfont smIcon icon-shoucangon"></text>
												<text>{{item}}</text>
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</template>
					<template v-else-if="option == 2">
						<!-- 学习 倒序 -->
						<view class="time-line-info" :key="index" :class="[layoutClass(index)]" :id="'timeline'+index" v-for="(item,index) in pathChiArr">
							<block v-if="index != pathChiArr.length-1">
								<!-- 内容块内容 -->
								<view class="line-info-content" >
									<!-- 时间轴圆点 -->
									<view class="line-on-round" :style="{ opacity: current[index]&&current[index].is=='ok'?1:0,top:'50px'}" :class="current[index]&&current[index].is=='ok'?comeani:''"></view>
									<view class="info-content-wrap" :style="{ opacity: current[index]&&current[index].is=='ok'?1:0}" :class="current[index]&&current[index].is=='ok'?comeani:''">
										<!-- 标题 -->
										<view class="info-title">{{(pathChiArr.length-index)-1}}级</view>
										<!-- 内容 -->
										<view class="info-content">
											<view class="info-txt colTxt" :class="classes(index)">
												<text class="iconfont smIcon icon-shoucangon"></text>
												<text>{{item}}</text>
											</view>
										</view>
									</view>
								</view>
							</block>
							<block v-else>
								<view class="time-line-title spec">
									<view>本知识点</view>
									<view class="colTxt" :class="classes(index)">
										<text class="iconfont icon-shoucangon"></text>
										<text>{{pathChiArr[pathChiArr.length-1]}}</text>
									</view>
								</view>
							</block>
						</view>
					</template>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default{
		data(){
			return{
				// 数据
				HEIGHT:0,//屏幕高度
				result:[],//监听的结果
				current:[],//当前在屏幕内的
				sum:0,//加载完成个数
				comeani:'come-ani',//入场动画
				isScroll:true,//是否加载动画
			}
		},
		props:{
			location:{
				type:String,
				default:'center',
			},
			option:Number,
			traceList:Object,
			pathArr:Array,
			pathChiArr:Array,
			pathNewArr:Array
		},
		computed:{
			addTypeClass(){
				let _class="";
				let arrType =["left","right","center"];
				if (arrType.indexOf(this.location)!==-1&&this.location!=='center') {
					_class+=this.location+"-time-line";
				}
				return{
					_class,
					'spec':this.pathChiArr.length == 1
				};
			},
			classes(){
				return function(index){
					return{
						'noZd' : this.pathNewArr[index].noZdFlag,
						'beingZd': this.pathNewArr[index].beingZdFlag,
						'hasZd' : this.pathNewArr[index].hasZdFlag
					}
				}
			}
		},
		mounted() {
			this.init();
		},
		methods:{
			init(){
				try { 
					// 获取屏幕高度
					const res = uni.getSystemInfoSync();
					this.HEIGHT=res.screenHeight;
					// 添加标志位
					for(let i=0;i<this.pathChiArr.length;i++){
						this.current.push({tag:'timeline'+i,is:'no'});
					}
					//console.log(this.current)
					// 开始获取位置信息
					this.getScroll();		
				} catch (e) {
					// error
				}
			},
			loadani(){
				for(let i=0;i<this.result.length;i++){
					for(let j=0;j<this.result[i].info.length;j++){
						// 是否没加载动画
						if(this.current[j].is!='ok'){
							// 是否进入视野
							if(this.current[j].tag==this.result[i].info[j].tag &&
							   this.result[i].info[j].domTop+90<this.HEIGHT){
								// 加载动画
								this.current[j].is='ok';
								this.sum=j+1;
							}
						}
					}
					// 移除当前
					this.result.splice(i,1);
				}
				// 是否全部加载完成
				if(this.sum==this.pathChiArr.length){this.isScroll=false;}
			},
			async getScroll(){
				if(!this.isScroll){return;}
				let info=[];
				// 返回位置信息加入数组
				for(let i=0;i<this.pathChiArr.length;i++){
					await this.getNodeList('timeline'+i,i).then(res => {
						info.push(res);
					});
				}
				this.result.push({info:info});
				// 加载动画
				this.loadani();
			},
			getNodeList(id,i){
				// 获取位置信息并返回
				return new Promise(resolve=>{
					const query = uni.createSelectorQuery().in(this);
					query.select('#'+id).boundingClientRect(data => {
					  // console.log("得到布局位置信息" + JSON.stringify(data));
					  // console.log("节点离页面顶部的距离为" + data.top);
					  resolve({domInfo:data.height,domTop:data.top,tag:id})
					}).exec();
				});
			},
			// 添加动画
			layoutClass(index){
				let _class="";
				if(this.location=='center'&&index%2!=0){
					if(this.option == 2){
						if(index != this.pathChiArr.length - 1){
							_class='right-info';
						}else{
							_class = '';
						}
					}else{
						_class='right-info';
					}
				}
				return _class;
			}
		},
	}
</script>

<style lang="scss">
	.time-line-wrap{
		width: 100%;
		overflow-x: hidden;
	}
	.hasZd{
		color:#64ccf2;
		.icon-shoucangon{
			color:#64ccf2;
		}
	}
	.beingZd{
		color:#fec812;
		.icon-shoucangon{
			color:#fec812;
		}
	}
	.noZd{
		color: $pss-text-colora;
	}
	.icon-shoucangon{
		margin-right: 10rpx;
		color: $pss-text-colora;
		font-weight: normal;
		@include respTo(phone){
			font-size:$font-size30;
		}
		@include respTo(pad){
			font-size:$padSize24;
		}
		&.smIcon{
			@include respTo(phone){
				font-size:$font-size28;
			}
			@include respTo(pad){
				font-size:$padSize20;
			}
		}
	}
	.time-line-wrap{
		font-family: sans-serif;
		.time-line{
			padding: 2% 1%;
			.time-line-title{
				font-weight: 800;
				text-align: center;
				margin-bottom: 15px;
				color: $pss-text-color3;
				background: #fff;
				margin-top: -20rpx;
				padding-bottom: 10rpx;
				@include respTo(phone){
					font-size:$font-size34;
				}
				@include respTo(pad){
					font-size:$padSize24;
				}
				&.spec{
					margin-top: 50rpx;
					padding-bottom: 30rpx;
					margin-bottom: -30rpx;
				}
			} 
			// 中间的轴
			.time-line-container{
				padding: 3% 1%;
				position: relative;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
					height: 100%;
					background: $pss-text-colord;
					border-radius: 20rpx;
					@include respTo(phone){
						width: 8rpx;
					}
					@include respTo(pad){
						width: 6rpx;
					}
				}
				&.spec{
					padding:3% 1% 0;
					&::before{
						background: #fff;
					}
				}
				.time-line-list{
					width: 100%;
					.time-line-info{	
						position: relative;
						.line-info-content{
							will-change: auto;
							width: 43%;
							display: flex;
							flex-direction: column;
							.line-on-round{
								@include respTo(phone){
									height: 20rpx;
									width: 20rpx;
									border: 8rpx solid $pss-text-colord;
									box-shadow: 0px 2rpx 1rpx 1rpx rgba(0,0,0,.1);
								}
								@include respTo(pad){
									height: 12rpx;
									width: 12rpx;
									border: 6rpx solid $pss-text-colord;
								}
								border-radius: 50%;
								background: #fff;
								position: absolute;
								left: 0;
								right: 0;
								margin: 0 auto;
								top: 50px;
								z-index: 10;
								&.come-ani{
									animation: come-round .8s ease-in-out;
								}
							}
							.info-content-wrap{
								position: relative;
								.info-title{
									word-break: break-word;
									text-align: right;
									margin: 5px 0;
									font-weight: 500;
									min-height: 30px;
									@include respTo(phone){
										font-size: $font-size34;
									}
									@include respTo(pad){
										font-size: $padSize20;
									}
									span{color: $pss-color-blue;font-size: 38rpx;font-weight: 600;padding-left: 3px;}
								}
								.info-content{
									// box-shadow: 1rpx 1rpx 1rpx 1rpx #d7e4ed;
									border: 1rpx solid #eee;
									border-radius: 15rpx;
									padding:15rpx; 
									position: relative;	
									color: $pss-text-colora;
									@include respTo(phone){
										font-size: $font-size30;
										min-height: 40rpx;
									}
									@include respTo(pad){
										font-size: $padSize20;
										min-height: 30rpx;
									}
									&::before{
										content: '';
										position: absolute;
										left: 100%;
										@include respTo(phone){
											top: 24rpx;
											border: 7px solid;
											border-color: transparent transparent transparent #dcdcdc;
										}
										@include respTo(pad){
											top: 14rpx;
											border: 10px solid; 
											border-color: transparent transparent transparent #dcdcdc;
										}
									}
								}
								&.come-ani{
									animation: come-in-left .6s ease-in-out;
								}		
							}
						}
					}
					.right-info{
						transform: rotateY(180deg);
						.line-info-content{
							.info-content-wrap{
								.info-title{
									transform: rotateY(180deg);
									text-align: left;
								}
								.info-content{
									.info-txt{transform: rotateY(180deg)}
								}
							}
						}
					}
				}
			}
			
			// 轴在左边
			.left-time-line{
				&::before{
					margin: 0;
					left: 15px;
				}
				.time-line-list{
					.time-line-info{	
						.line-info-content{
							width: auto;
							.line-on-round{
								left: 0;
								margin: 0;
							}
							.info-content-wrap{
								margin-left: 45px;
								margin-bottom: 15px;
								.info-title{
									text-align: left;	
								}
								.info-content{
									&::before{
										border-color: transparent #aaa transparent transparent;
										left: -15px;
									}
								}
								&.come-ani{
									animation: come-in-right .6s ease-in-out;
								}
							}
						}
					}
				}
			}
			
			// 轴在右边
			.right-time-line{
				&::before{
					margin: 0;
					left: 92.8%;
				}
				.time-line-list{
					.time-line-info{	
						.line-info-content{
							width: auto;
							.line-on-round{
								left: 90%;
								margin: 0;
							}
							.info-content-wrap{
								margin-right: 55px;
								margin-bottom: 15px;
								.info-content{
									&::before{
										border-color: transparent transparent transparent #aaa;
									}
								}
								
							}
						}
					}
				}
			}
		}
	}
	
	@keyframes come-in-left {
		0% {
			transform: translateX(-120%);
		}
		70% {
			transform: translateX(8%);
		}
		100% {
			transform: translateX(0);
		}
	}
	@keyframes come-in-right {
		0% {
			transform: translateX(120%);
		}
		70% {
			transform: translateX(-8%);
		}
		100% {
			transform: translateX(0);
		}
	}
	@keyframes come-round {
		0% {
			transform: scale(0);
			opacity: 0;
		}
		40% {
			opacity: 0;
		}
		60% {
			transform: scale(1.2);
		}
		100% {
			transform: scale(1);
		}
	}

</style>
